import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export default () => {
  // 创建场景
  const scene = new THREE.Scene()
  // 创建透视投影相机
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
  // 相机位置
  camera.position.set(30, 40, 30)
  // 看向的目标
  camera.lookAt(scene.position) // 看向场景
  // 渲染器
  const renderer = new THREE.WebGLRenderer()
  renderer.setClearColor(0xEEEEEE, 1.0) // 颜色
  renderer.setSize(window.innerWidth, window.innerHeight) // 尺寸
  document.body.appendChild(renderer.domElement) // 将渲染器添加到body
  // 创建几何体
  const cubeGeomery = new THREE.BoxGeometry(4, 4, 4) // BOX几何体
  const cuberMaterial = new THREE.MeshPhongMaterial({ // 创建材质
    'color': 0xff0000
  })
  const cube = new THREE.Mesh(cubeGeomery, cuberMaterial)
  // 几何体加入到场景中
  scene.add(cube)

  // 添加光线
  const light = new THREE.SpotLight(0xf876c6)
  light.position.set(40, 40, 40) // 光线位置
  scene.add(light)

  // 让几何体动起来
  let step = 0
  function render () {
    step += 0.02
    cube.position.x = 10 + 10 * Math.cos(step)
    cube.position.y = 2 + 10 * Math.abs(Math.sin(step))
    // 将场景和相机加入到渲染器中
    renderer.render(scene, camera)
    requestAnimationFrame(render)
  }
  render()

  // 加入辅助坐标，可以直观的看运动方向
  const axes = new THREE.AxesHelper()
  scene.add(axes)

  // 加入交互工具
  const controls = new OrbitControls(camera, renderer.domElement)
  controls.addEventListener('change', () => {
    renderer.render(scene, camera)
  })
}
